<template>
	<div class="all">
		<div class="flexb">
			<div class="name">
				<div class="da hei cu">昵称：{{person.nickName}}</div>
				<div class="xiao hui" style="margin-bottom: 0.1rem;">账号：{{person.phone}}</div>
			</div>
			<!-- <div class="tx"><img src="../../dist/static/head.jpg"></div> -->
		</div>
		<div class="qian">
			<div class="flexb">
				<div class="f1">
					<div class="lan y1">账户余额 (元)</div>
					<div class="bai y2" v-if="person.money == 0">0.00</div>
					<div class="bai y2" v-if="person.money != 0">{{person.money | qu0}}</div>
				</div>
				<div class="f2">
					<div class="y3 bai xiao" @click="chongzhishow = true">充值缴费</div>
				</div>
			</div>
			<div class="flexb">
				<div class="lan y4 xiao" v-if="person.needPay == 0">续订套餐需扣费：0.00</div>
				<div class="lan y4 xiao" v-if="person.needPay != 0">续订套餐需扣费：{{person.needPay | qu0}}</div>
				<div class="huang y5 xiao" v-if="person.needPay > person.money">余额不足！</div>
			</div>
		</div>
		<div class="shezhi flexb">
			<div class="li" @click="go('apn')">
				<div class="tu"><img src="../../static/img/t3.png"></div>
				<div class="name" >APN设置</div>
			</div>
			<div class="li" @click="go('wenti')">
				<div class="tu"><img src="../../static/img/t1.png"></div>
				<div class="name" >常见问题</div>
			</div>
			<div class="li" @click="go('zhanghao')">
				<div class="tu"><img src="../../static/img/t2.png"></div>
				<div class="name">账号设置</div>
			</div>
		</div>
		<div class="biaoti flexb" v-if="list.length != 0">
			<div class="bt">已绑定{{list.length}}张</div>
			<div class="flex flexc" @click="go('bangdingliuliang')" >
				<div class="tu"><img src="../../static/img/t4.png"></div>
				<div class="bt">增加新卡</div>
			</div>
		</div>
		<div class="meiyou flex flexc" @click="go('bangdingliuliang')" style="margin-top: 0.2rem;" v-if="list.length == 0">
			<div class="flex flexc">
				<div class="tu"><img src="../../static/img/t4.png"></div>
				<div class="bt">增加新卡</div>
			</div>
		</div>
		<div>
			<div class="ka" v-for="(item,index) in list" :key="item.id">
				<div class="ktop flexb flexc">
					<div class="flex flexc ktop1">
						<div class="tu flex flexc"><img src="../../static/img/t5.png"></div>
						<div class="kname flex flexc">卡-{{index+1}}</div>
						<div class="krenzheng flex flexc" v-if="item.isRealName == 1">已实名认证</div>
						<div class="krenzheng flex flexc" v-if="item.isRealName == 0" style="color: #f00;">未实名认证</div>
					</div>
<!-- 					0 未使用  1 已缴费   2是欠费断网  3是次月生效 4是自助停机 5注销   reason
					0停机 1 正常使用  2 标记换卡 3是待生效(绑卡之后就是待生效，无论什么时候生效) -->
					<div class="kzhuangtai">
						状态：
						<span v-if="item.status == 1">正常使用</span>
						<span v-if="item.status == 2">标记换卡</span>
						<span v-if="item.status == 3">待生效</span>
						<span v-if="item.status == 0 && item.reason == 0">未使用</span>
						<span v-if="item.status == 0 && item.reason == 1">下月生效</span>
						<span v-if="item.status == 0 && item.reason == 2">欠费断网</span>
						<span v-if="item.status == 0 && item.reason == 3">欠费停机</span>
						<span v-if="item.status == 0 && item.reason == 4">自助停机</span>
						<span v-if="item.status == 0 && item.reason == 5">注销</span>
					</div>
				</div>
				<div class="kcon">
					<div class="flexb kli">
						<div class="k1 flex">
							<div class="k11">ICCID</div>
							<div class="k12">{{item.iccid}}</div>
						</div>
						<div class="k2" style="color: #FF6B4F;" @click="go('genghuan',item.iccid)">换卡</div>
					</div>
					<div class="flexb kli">
						<div class="k1 flex">
							<div class="k11">当前套餐</div>
							<div class="k12">{{item.packageName}}</div>
						</div>
						<div class="k2" @click="go('gaitaocan',item.iccid)">更改</div>
					</div>
					<div class="flexb kli">
						<div class="k1 flex">
							<div class="k11">本月已用</div>
							<div class="k12" v-if="!item.yiyong" @click="chaxun(item.iccid,item.flow,index)">点击查询</div>
							<div class="k12" v-if="item.yiyong">{{item.yiyong}}</div>
						</div>
					</div>
					<div class="flexb kli">
						<div class="k1 flex">
							<div class="k11">本月剩余</div>
							<div class="k12" v-if="!item.shengyu">--.--M</div>
							<div class="k12" v-if="item.shengyu">{{item.shengyu}}M</div>
						</div>
						<div class="k2" @click="go('jiayoubao',item.iccid)">购买加油包</div>
					</div>
				</div>
				<div class="yincang" v-if="!item.yincang">
					<div class="flexb" style="margin-bottom: 0.2rem;">
						<div>
							<div class="hei ico" style="margin-bottom: 0.1rem;">设备解绑
								<van-icon name="question" color="#93959B" />
							</div>
							<div class="hui">(更换上网设备或卡槽需操作解绑)</div>
						</div>
						<div class="hei" @click="jiebang(item.iccid)">解绑</div>
					</div>
					<div class="flexb">
						<div>
							<div class="hei ico" style="margin-bottom: 0.1rem;">卡用户解绑
								<van-icon name="question" color="#93959B" />
							</div>
							<div class="hui">(卡与当前账号解绑，不再从当前账号扣费)</div>
						</div>
						<div class="hei" @click="jiebang2(item.iccid)">解绑</div>
					</div>
				</div>
				<div class="shezhi flexb" style="margin-top: 0;"  v-if="!item.yincang">
					<div class="li" @click="shuaxin(item.iccid)">
						<div class="tu"><img src="../../static/img/t6.png"></div>
						<div class="name">刷新状态</div>
					</div>
					<div class="li" @click="jiebang3(item.iccid)">
						<div class="tu"><img src="../../static/img/t7.png"></div>
						<div class="name">停机保号</div>
					</div>
					<div class="li" @click="zhuxiao(item.iccid)">
						<div class="tu"><img src="../../static/img/t8.png"></div>
						<div class="name">注销该卡</div>
					</div>
				</div>
				<div class="kb flex" @click="item.yincang = !item.yincang">
					<div v-if="item.yincang">展开<van-icon name="arrow-down" /></div>
					<div v-if="!item.yincang">收起<van-icon name="arrow-up" /></div>
				</div>
			</div>
		</div>
		
		<div class="flex feiyong" v-if="list.length != 0">
			<div class="xiao" style="color: red; margin-right: 0.1rem;">*</div>
			<div class="hei xiao">每月26号零点预扣次月费用，次月流量1号生效。 如未充值次月费用则本月26号零点断网，充值后本 月剩余流量月底清零。</div>
		</div>

		<van-popup v-model="jiebangshow" class="tongzhi">
			<div class="tname hei">卡用户解绑</div>
			<div class="tcon hei">
				<div>操作后： </div>
				<div>1、该卡将与当前账号卡列表消失； </div>
				<div>2、该卡可绑定到其他账号名下，换绑后 当月流量仍可使用。</div>
			</div>
			<div class="tbon flex">
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="jiebangshow=false">取消</div>
				
				<div class="cli huang" @click="kacaozuo(1)">确定解绑</div>
			</div>
		</van-popup>
		<van-popup v-model="jiebangshow2" class="tongzhi">
			<div class="tname hei">设备解绑</div>
			<div class="tcon hei">
				<div>设备解绑一个月只能操作两次，多操作 无效。 </div>
			</div>
			<div class="tbon flex">
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="jiebangshow2=false">取消</div>
				<div class="cli huang" @click="kacaozuo(2)">确定解绑</div>
			</div>
		</van-popup>
		<van-popup v-model="tingjishow" class="tongzhi">
			<div class="tname hei">停机保号</div>
			<div class="tcon hei">
				<div>停机保号后该卡不会再扣次月流量费，最多可停机2个月。</div>
				<div class="red">(本月流量只可使用到26号0点)</div>
			</div>
			<div class="tbon flex">
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="tingjishow=false">取消</div>
				<div class="cli huang" @click="kacaozuo(9)">停机保号</div>
			</div>
		</van-popup>
		<van-popup v-model="kaijishow" class="tongzhi">
			<div class="tname hei">开机启用</div>
			<div class="tcon hei">
				<div>开机启用后该卡将会立即扣除本月流量费并生效。</div>
			</div>
			<div class="tbon flex">
				
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="kaijishow=false">取消</div>
				<div class="cli huang" @click="kacaozuo(1)">开机启用</div>
			</div>
		</van-popup>
		<van-popup v-model="zhuxiaoshow" class="tongzhi">
			<div class="tname hei">注销该卡</div>
			<div class="tcon hei">
				<div>注销后该卡立即作废，无法使用。</div>
				<div class="red">注：该操作不可逆，请谨慎操作！</div>
			</div>
			<div class="tbon flex">
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="zhuxiaoshow=false">取消</div>
				<div class="cli huang" @click="kacaozuo(6)">注销</div>
			</div>
		</van-popup>
		<van-popup v-model="shuaxinshow" class="tongzhi">
			<div class="tname hei">刷新状态</div>
			<div class="tcon hei">
				<div>刷新状态可处理：充值缴费、订购加油 包、实名认证后无法使用的情况操作后 大约10分钟恢复正常，如果仍未恢复请 联系客服。</div>
			</div>
			<div class="tbon flex">
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="shuaxinshow=false">取消</div>
				<div class="cli huang" @click="kacaozuo(8)">刷新</div>
			</div>
		</van-popup>
		<van-popup v-model="chongzhishow" class="tongzhi">
			<div class="tname hei">点击充值额度</div>
			<div class="talt">充值过程中遇到任何问题请联系客服！</div>
			<div class="tcon hei flexb">
				<div :class="chongzhiid == 10 ? 'tli flexb flexc tliact':'tli flexb flexc '" @click="chongzhix(10)">
					<div class="bai da czli">10元</div>
					<div class="bai xiao czli">售价：9.9</div>
				</div>
				<div :class="chongzhiid == 30 ? 'tli flexb flexc tliact':'tli flexb flexc '" @click="chongzhix(30)">
					<div class="bai da czli">30元</div>
					<div class="bai xiao czli">售价：29.7</div>
				</div>
				<div :class="chongzhiid == 50 ? 'tli flexb flexc tliact':'tli flexb flexc '" @click="chongzhix(50)">
					<div class="bai da czli">50元</div>
					<div class="bai xiao czli">售价：49.5</div>
				</div>
				<div :class="chongzhiid == 100 ? 'tli flexb flexc tliact':'tli flexb flexc '" @click="chongzhix(100)">
					<div class="bai da czli">100元</div>
					<div class="bai xiao czli">售价：99</div>
				</div>
				<div :class="chongzhiid == 200 ? 'tli flexb flexc tliact':'tli flexb flexc '" @click="chongzhix(200)">
					<div class="bai da czli">200元</div>
					<div class="bai xiao czli">售价：198</div>
				</div>
				<div :class="chongzhiid == 300 ? 'tli flexb flexc tliact':'tli flexb flexc '" @click="chongzhix(300)">
					<div class="bai da czli">300元</div>
					<div class="bai xiao czli">售价：297</div>
				</div>
			</div>
			<div class="tbon flex">
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="chongzhishow = false">取消</div>
				<div class="cli huang" @click="chongzhi">充值</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import axios from 'axios'
	import bus from '@/assets/bus.js'
	export default {
		name: 'index',
		data() {
			return {
				active: 2,
				jiebangshow: false,
				jiebangshow2: false,
				tingjishow: false,
				kaijishow: false,
				zhuxiaoshow: false,
				shuaxinshow: false,
				you: true,
				chongzhishow: false,
				chongzhiid: 10,
				person:"",
				list:[],
				chooseid:"",
				xuanzhongid:""
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.getyonghu()
			this.getlist()
		},
		methods: {
			kacaozuo:function(type){
				this.axios.post(this.urls + `/work/card/sendOrder?iccid=${this.xuanzhongid}&type=`+type)
					.then(response => {
						if(response.data.success == true){
							this.$toast('操作完成');
							this.getlist()
							this.zhuxiaoshow = false
							this.jiebangshow = false
							this.jiebangshow2 = false
							this.tingjishow = false
							this.zhuxiaoshow = false
							this.shuaxinshow = false
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			denglu:function(){
				
			},
			getlist:function(){
				this.axios.get(this.urls+`/mobile/api/getBandCardList`)
					.then(response => {
						if(response.data.success == true){
							this.list = response.data.result
							for(let i in this.list){
								this.$set(this.list[i],'yincang',true)
							}
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			getyonghu:function(){
				this.axios.get(this.urls+`/mobile/api/getCountInfo`)
					.then(response => {
						
						if(response.data.success == true){
							this.person = response.data.result
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			chaxun:function(iccid,flow,i){
				this.axios.post(this.urls+`/old_work/iotCard/findTraffic?account=`+iccid)
					.then(response => {
						if(response.data.success == true){
							if(response.data.result.code == 303){
								this.$toast('查询失败，请稍后再试');
								return false
							}
							//本月已用
							if(response.data.result.total_bytes_cnt){
								this.$set(this.list[i],'yiyong',response.data.result.total_bytes_cnt)
							}
							//本月已用
							if(response.data.result.total_bytes_cnt){
								this.$set(this.list[i],'shengyu',flow - parseFloat(response.data.result.total_bytes_cnt))
							}
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			chongzhi:function(){
				let that = this
				this.axios.post(this.urls+`/mobile/api/wechatPay?price=${this.chongzhiid}&title=充值`)
					.then(response => {
						console.log(response.data.result)
						WeixinJSBridge.invoke(
						 'getBrandWCPayRequest', {
						      "appId":response.data.result.appId,
						      'timeStamp': response.data.result.timeStamp,
						      'nonceStr': response.data.result.nonceStr,
						      'package': response.data.result.package,
						      'signType': "MD5",
						      'paySign': response.data.result.paySign,
						 },
						 function(res){
						       if(res.err_msg == "get_brand_wcpay_request:ok" ){
								   that.$toast('充值成功');
								   that.getyonghu()
								   setTimeout(function(){
									  that.chongzhishow = false 
								   },500)
							   } 
						 }); 
					})
			},
			//充值选
			chongzhix: function(id) {
				this.chongzhiid = id
			},
			//注销
			zhuxiao: function(id) {
				this.xuanzhongid = id
				this.zhuxiaoshow = true
			},
			//刷新
			shuaxin: function(id) {
				this.xuanzhongid = id
				this.shuaxinshow = true
			},
			//解绑
			jiebang: function(id) {
				this.xuanzhongid = id
				this.jiebangshow = true
			},
			//解绑2
			jiebang2: function(id) {
				this.xuanzhongid = id
				this.jiebangshow2 = true
			},
			//停机绑号
			jiebang3: function(id) {
				this.xuanzhongid = id
				this.tingjishow = true
			},
			//跳转
			go: function(url,canshu) {
				this.$router.push({
					path:url,
					query:{
						canshu:canshu
					}
				})
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		.meiyou {
			width: 6.7rem;
			height: 2.8rem;
			background: #FFFFFF;
			border-radius: 0.24rem;
			justify-content: center;

			.tu {
				img {
					width: 0.4rem;
					margin-right: 0.1rem;
					position: relative;
					top: 0.03rem;
				}
			}

			.bt {
				font-size: 0.32rem;
				font-weight: bold;
			}
		}

		.tongzhi {
			width: 6.5rem;
			border-radius: 0.1rem;
			opacity: 0.9;
			font-size: 0.28rem;

			.ico {
				font-size: 0.28rem;
			}

			.tli {
				background: #FFB300;
				text-align: center;
				border-radius: 0.1rem;
				opacity: 0.6;
				width: 2.75rem;
				height: 1.4rem;
				padding: 0.2rem 0;
				flex-wrap: wrap;
				margin-bottom: 0.2rem;

				.czli {
					width: 100%;
				}
			}

			.tliact {
				opacity: 1;
			}

			.talt {
				font-size: 0.24rem;
				color: #93959B;
				padding: 0.2rem 0.4rem;
			}

			.tname {
				line-height: 0.95rem;
				border-bottom: 1px #EAEAEA solid;
				font-size: 0.32rem;
				color: #2D3038;
				text-align: center;
				font-weight: bold;
			}

			.tcon {
				padding: 0.2rem 0.4rem 0.4rem;
				line-height: 0.48rem;
				flex-wrap: wrap;
			}

			.tbon {
				border-top: 1px #EAEAEA solid;
			}

			.cli {
				flex: 1;
				text-align: center;
				font-size: 0.28rem;
				line-height: 0.75rem;
				margin: 0.1rem 0;
			}
		}

		.feiyong {
			padding: 0.3rem 0.1rem;
		}

		.yincang {
			border-top: 1px #EAEAEA solid;
			border-bottom: 1px #EAEAEA solid;
			font-size: 0.28rem;
			padding: 0.3rem 0.4rem;
		}

		.kb {
			line-height: 0.8rem;
			background: #F2F6F9;
			color: #B6BECC;
			font-size: 0.24rem;
			justify-content: center;
		}

		.ka {
			border-radius: 0.24rem;
			background: #FFFFFF;
			padding: 0.1rem 0 0;
			overflow: hidden;

			.ktop {
				padding: 0.2rem 0.4rem;
				border-bottom: 1px #EAEAEA solid;
			}

			.tu {
				img {
					width: 0.34rem;
					margin-right: 0.1rem;
				}
			}

			.kname {
				font-size: 0.36rem;
				font-weight: bold;
				margin-right: 0.2rem;
			}

			.krenzheng {
				font-size: 0.24rem;
				color: #41CC8B;
			}

			.kzhuangtai {
				font-size: 0.28rem;
			}

			.kcon {
				padding: 0 0.4rem 0.4rem;

				.kli {
					margin-top: 0.3rem;
					font-size: 0.28rem;
				}

				.k1 {}

				.k11 {
					width: 1.3rem;
					font-size: 0.28rem;
					color: #93959B;
				}

				.k12 {
					font-size: 0.28rem;
					color: #2D3038;
				}

				.k2 {
					text-align: right;
					font-size: 0.28rem;
				}
			}
		}

		.biaoti {
			align-items: center;
			margin: 0.4rem 0;
			padding: 0 0.1rem;

			.tu {
				display: flex;
				align-items: center;
				text-align: center;

				img {
					width: 0.4rem;
					margin-right: 0.1rem;
					position: relative;
					top: 0.01rem;
				}
			}

			.bt {
				color: #2D3038;
				font-size: 0.32rem;
			}
		}

		.name {
			div {
				line-height: 0.5rem;
			}
		}

		.tx {
			img {
				width: 1rem;
				height: 1rem;
				border-radius: 0.1rem;
			}
		}

		.qian {
			border-radius: 0.24rem;
			width: 6.7rem;
			height: 2.57rem;
			padding: 0.4rem;
			background: #3154FF;

			.f1 {
				font-size: 12px;
			}

			.y1 {
				font-size: 0.28rem;
			}

			.y2 {
				font-size: 0.48rem;
				font-weight: bold;
				padding: 0.2rem 0 0.3rem;
			}

			.y3 {
				padding: 0.15rem 0.3rem;
				// line-height: 0.6rem;
				border-radius: 0.3rem;
				text-align: center;
				background: #FFB300;
			}
		}

		.shezhi {
			background: #FFFFFF;
			margin-top: 0.38rem;
			border-radius: 0.24rem;
			padding: 0.3rem 0;

			.li {
				flex: 1;
				text-align: center;

				.tu {
					font-size: 12px;
					margin-bottom: 0.2rem;

					img {
						width: 0.48rem;
						height: 0.48rem;
					}
				}

				.name {
					font-size: 0.24rem;
					color: #2D3038;
				}
			}
		}
	}
</style>
